javascript form 은 언제나 프론트엔드 개발자에게는 여러 의미로 숙제 입니다. 아마도 포맷팅이 가장 큰 숙제일텐데요. 놀라운 프레임워크가 나왔습니다.

2016/07/14 Editor’s choice

nosir/cleave.js
_cleave.js - Format input text content when you are typing_github.com

---

일단 샘플을 한번 보시죠.

Cleave.js - Format input text content when you are typing
_import React from ‘react’; import ReactDOM from ‘react-dom’; import Cleave from ‘cleave.js/react’; class MyComponent…_nosir.github.io

첫번째 샘플이 신용카드 포매팅인데 제가 6011 까지 입력했을때 Discover가 색깔이 들어 오는 것 보이시죠?

여기서 끝이 아닙니다.

KR을 지역코드로 입력하고 나니 정확하게 11자리 이상 입력이 안되는군요.

Block, Delimiter 등의 커스텀 옵션도 지원합니다.

---

설치

$npm install --save cleave.js

실행

<script src="cleave.min.js"\></script\>  
<script src="cleave-phone.{country}.js"\></script\>

phone은 필요할 때만 넣으면 됩니다.

Common.js, AMD 모두 지원하며

React를 사용하실 때는 다음과 같이 사용하시면 됩니다.

import React from 'react';  
import ReactDOM from 'react-dom';  

import Cleave from 'cleave.js/react';

class MyComponent extends React.Component {  

constructor(props, context) {  
super(props, context);  
this.onCreditCardChange = this.onCreditCardChange.bind(this);  
}  

onCreditCardChange(event) {  
// formatted pretty value  
console.log(event.target.value);  

// raw value  
console.log(event.target.rawValue);  
}  

render() {  
return (  
<Cleave placeholder="Enter your credit card number"  
options={{creditCard: true}}  
onChange={this.onCreditCardChange} /\>  
);  
}  
}

By Keen Dev on July 14, 2016.

Exported from Medium on May 31, 2017.